<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        v-permission="'menu-add'"
        class="filter-item"
        style="margin: 10px;"
        type="primary"
        icon="el-icon-edit"
        :row-class-name="tableRowClassName"
        @click="handleCreate"
      >
        添加菜单/按钮
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :default-expand-all="false"
      row-key="_id"
    >
      >
      <el-table-column label="名称" align="left">
        <template slot-scope="{row}">
          <el-button v-if="row.type === 'BUTTON'" type="text">{{ row.title }}</el-button>
          <span v-else>{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center">
        <template slot-scope="{row}">
          <span v-if="row.type === 'BUTTON'">按钮</span>
          <template v-else>
            <span v-if="row.menuType === 'GROUP'">目录</span>
            <span v-else>页面</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="path" align="center">
        <template slot-scope="{row}">
          <span>{{ row.path }}</span>
        </template>
      </el-table-column>

      <el-table-column label="组件位置" align="center">
        <template slot-scope="{row}">
          <span>{{ row.component }}</span>
        </template>
      </el-table-column>
      <el-table-column label="按钮标识码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="重定向" align="center">
        <template slot-scope="{row}">
          <span>{{ row.redirect }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="80" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="名称" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>
        <el-form-item label="上级菜单" prop="icon">
          <el-cascader
            v-model="temp.parent"
            :options="menuRecordsOfTree"
            :props="cascaderProps"
            :show-all-levels="true"
            clearable
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="temp.type">
            <el-radio label="MENU">菜单</el-radio>
            <el-radio label="BUTTON">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="temp.type === 'MENU'">
          <el-form-item label="组件位置" prop="component">
            <el-input v-model="temp.component" />
          </el-form-item>
          <el-form-item label="访问路径" prop="path">
            <el-input v-model="temp.path" />
          </el-form-item>
          <el-form-item label="跳转路径" prop="redirect">
            <el-input v-model="temp.redirect" />
          </el-form-item>
          <el-form-item label="是否隐藏" prop="isHidden">
            <el-checkbox v-model="temp.isHidden">隐藏</el-checkbox>
          </el-form-item>
          <el-form-item label="菜单类型" prop="menuType">
            <el-radio-group v-model="temp.menuType">
              <el-radio label="GROUP">菜单组</el-radio>
              <el-radio label="LINK">页面</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-select v-model="temp.icon" placeholder="请选择图标">
              <el-option
                v-for="item in icons"
                :key="item.title"
                :label="item.title"
                :value="item.title"
              >
                <span style="float: left"><svg-icon :icon-class="item.title" /></span>
                <span style="float: right; color: #8492a6; font-size: 14px">{{ item.title }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="按钮标识" prop="code">
            <el-input v-model="temp.code" />
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import icons from '@/utils/icons'
export default {
  data() {
    return {
      icons,
      showReviewer: false,
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      temp: {
        _id: '',
        isHidden: false, // 是否隐藏
        menuType: 'GROUP', // 菜单类型,默认为组
        type: '', // 类型
        title: '', // 名称
        path: '', // 浏览器访问路径
        redirect: '', // 浏览器跳转路径,有下级菜单才有效
        icon: '', // 菜单的图标
        component: 'Layout', // 页面文件所在项目的位置
        parent: '', // 上级菜单
        code: '' // 按钮标识
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑菜单',
        create: '创建菜单'
      },
      rules: {
        title: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '浏览器访问路径不能为空', trigger: 'blur' }],
        component: [{ required: true, message: '组件路径不能为空', trigger: 'blur' }],
        key: [{ required: true, message: '按钮标识不能为空', trigger: 'blur' }],
        url: [{ required: true, message: '请求url不能为空', trigger: 'blur' }],
        method: [{ required: true, message: '请求方式不能为空', trigger: 'blur' }]
      },
      menuRecordsOfTree: [],
      cascaderProps: {
        value: '_id',
        label: 'title',
        children: 'children',
        emitPath: false,
        checkStrictly: true
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    handleChange(value) {
      console.log(value)
    },
    getList() {
      this.listLoading = true
      this.$api.getMenuTreeIncludeBtnApi().then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleCreate() {
      this.resetTemp()
      this.temp.type = 'MENU'
      this.temp.menuType = 'GROUP'
      this.dialogStatus = 'create'
      this.$api.getMenuTreeNotIncludeBtnApi().then(response => {
        this.menuRecordsOfTree = response.data.items
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    resetTemp() {
      this.temp = {
        _id: '',
        isHidden: false, // 是否隐藏
        menuType: 'GROUP', // 菜单类型,默认为组
        type: '', // 类型
        title: '', // 名称
        path: '', // 浏览器访问路径
        redirect: '', // 浏览器跳转路径,有下级菜单才有效
        icon: '', // 菜单的图标
        component: 'Layout', // 页面文件所在项目的位置
        parent: '', // 上级菜单
        code: '' // 标识
      }
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.temp.type === 'MENU') {
            this.$api.createMenuApi(this.temp).then(() => {
              this.getList()
              this.dialogFormVisible = false
              this.$notify({
                title: 'Success',
                message: '菜单添加成功',
                type: 'success',
                duration: 2000
              })
            })
          } else {
            this.$api.createButtonApi(this.temp).then(() => {
              this.getList()
              this.dialogFormVisible = false
              this.$notify({
                title: 'Success',
                message: '按钮添加成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        }
      })
    },
    handleUpdate(row) {
      this.dialogStatus = 'update'
      this.$api.getMenuTreeNotIncludeBtnApi().then(response => {
        this.menuRecordsOfTree = response.data.items
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.temp = row
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          console.log("🚀 ~ file: test.vue ~ line 325 ~ this.$refs['dataForm'].validate ~ tempData", tempData)
          this.$api.updateMenuApi(tempData).then(() => {
            // const index = this.list.findIndex(v => v.id === this.temp.id)
            // this.list.splice(index, 1, this.temp)
            this.getList()
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Update Successfully',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleDelete(row, index) {
      this.$api.removeMenuApi(row._id).then(res => {
        this.getList()
        this.$notify({
          title: res.message,
          message: res.message,
          type: 'success',
          duration: 2000
        })
      })
      // deletePermission(row).then((data) => {
      //   this.getList()
      //   this.$notify({
      //     title: data.message,
      //     message: '',
      //     type: 'success',
      //     duration: 2000
      //   })
      // })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
